import { Button, ComboBox, LineEdit, Slider, SpinBox, Switch } from "std-widgets.slint";

// 定义颜色常量
global Colors {
    // 基础颜色
    property color primary: #ffcc00;
    property color secondary: #42a5f5;
    property color success: #4caf50;
    property color danger: #f44336;
    property color warning: #ff9800;
    property color info: #2196f3;
    
    // 便签颜色
    property color yellow: #fff9c4;
    property color blue: #bbdefb;
    property color green: #c8e6c9;
    property color pink: #f8bbd0;
    property color purple: #e1bee7;
    property color orange: #ffe0b2;
    
    // 文本颜色
    property color text-primary: #212121;
    property color text-secondary: #757575;
    property color text-disabled: #9e9e9e;
    
    // 背景颜色
    property color background: #f5f5f5;
    property color surface: #ffffff;
}

// 应用状态管理
global AppState {
    // 当前活动的便签ID
    property string active-note-id;
    
    // 便签列表是否可见
    property bool note-list-visible: false;
    
    // 设置面板是否可见
    property bool settings-visible: false;
    
    // 搜索查询
    property string search-query: "";
    
    // 切换便签列表可见性
    public function toggle-note-list() {
        note-list-visible = !note-list-visible;
        settings-visible = false;
    }
    
    // 切换设置面板可见性
    public function toggle-settings() {
        settings-visible = !settings-visible;
        note-list-visible = false;
    }
    
    // 创建新便签的回调
    callback create-new-note();
    
    // 选择便签的回调
    callback select-note(string note-id);
    
    // 移动便签的回调
    callback move-note(string note-id, float x, float y);
    
    // 调整便签大小的回调
    callback resize-note(string note-id, float width, float height);
    
    // 更新便签内容的回调
    callback update-note-content(string note-id, string content);
    
    // 更新便签标题的回调
    callback update-note-title(string note-id, string title);
    
    // 更改便签颜色的回调
    callback change-note-color(string note-id, string color);
    
    // 最小化/恢复便签的回调
    callback toggle-minimize-note(string note-id);
    
    // 删除便签的回调
    callback delete-note(string note-id);
    
    // 搜索便签的回调
    callback search-notes(string query) -> [string];
}

// 便签组件
component NoteItem inherits Rectangle {
    property string note-id;
    property string title;
    property string content;
    property color note-color: Colors.yellow;
    property bool is-active: AppState.active-note-id == note-id;
    property bool is-minimized: false;
    
    width: 200px;
    height: is-minimized ? 32px : 200px;
    border-radius: 8px;
    background: note-color;
    drop-shadow-offset-x: 2px;
    drop-shadow-offset-y: 2px;
    drop-shadow-blur: 5px;
    drop-shadow-color: #00000066;
    
    // 支持拖拽移动
    property <bool> dragging: false;
    property <length> drag-start-x;
    property <length> drag-start-y;
    property <length> original-x;
    property <length> original-y;
    
    animate background { duration: 200ms; }
    animate height { duration: 200ms; }
    
    // 标题栏
    Rectangle {
        y: 0;
        width: parent.width;
        height: 32px;
        border-radius: 8px 8px 0 0;
        background: root.note-color.darker(10%);
        
        Text {
            x: 8px;
            y: 0;
            width: parent.width - 64px;
            height: parent.height;
            text: root.title;
            color: Colors.text-primary;
            vertical-alignment: center;
            font-size: 14px;
            font-weight: 600;
            overflow: elide;
        }
        
        HorizontalLayout {
            x: parent.width - self.width - 4px;
            y: 4px;
            width: 56px;
            height: 24px;
            spacing: 4px;
            
            // 最小化按钮
            Rectangle {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                background: root.note-color.darker(10%);
                
                Image {
                    source: @image-url("../assets/icons/minimize.svg");
                    width: 16px;
                    height: 16px;
                    x: (parent.width - self.width) / 2;
                    y: (parent.height - self.height) / 2;
                    colorize: Colors.text-secondary;
                }
                
                TouchArea {
                    width: 100%;
                    height: 100%;
                    clicked => {
                        root.is-minimized = !root.is-minimized;
                        AppState.toggle-minimize-note(root.note-id);
                    }
                }
            }
            
            // 关闭按钮
            Rectangle {
                width: 24px;
                height: 24px;
                border-radius: 4px;
                background: root.note-color.darker(10%);
                
                Image {
                    source: @image-url("../assets/icons/close.svg");
                    width: 16px;
                    height: 16px;
                    x: (parent.width - self.width) / 2;
                    y: (parent.height - self.height) / 2;
                    colorize: Colors.text-secondary;
                }
                
                TouchArea {
                    width: 100%;
                    height: 100%;
                    clicked => {
                        AppState.delete-note(root.note-id);
                    }
                }
            }
        }
    }
    
    // 内容区域
    Rectangle {
        y: 32px;
        width: parent.width;
        height: parent.height - 32px;
        visible: !root.is-minimized;
        
        TextInput {
            x: 8px;
            y: 8px;
            width: parent.width - 16px;
            height: parent.height - 16px;
            text: root.content;
            color: Colors.text-primary;
            wrap: word-wrap;
            font-size: 14px;
            
            edited => {
                root.content = self.text;
                AppState.update-note-content(root.note-id, self.text);
            }
        }
    }
    
    // 支持拖拽移动
    TouchArea {
        property <bool> resize-mode: false;
        width: 100%;
        height: 100%;
        
        pointer-event(event) => {
            if (event.button == PointerEventButton.left) {
                if (event.kind == PointerEventKind.down) {
                    root.original-x = root.x;
                    root.original-y = root.y;
                    root.drag-start-x = event.x;
                    root.drag-start-y = event.y;
                    root.dragging = true;
                    AppState.active-note-id = root.note-id;
                    AppState.select-note(root.note-id);
                } else if (event.kind == PointerEventKind.up) {
                    if (root.dragging) {
                        root.dragging = false;
                        AppState.move-note(root.note-id, root.x, root.y);
                    }
                } else if (event.kind == PointerEventKind.move && root.dragging) {
                    // 只有在拖拽标题栏时才移动便签
                    if (event.y <= 32px) {
                        root.x = root.original-x + (event.x - root.drag-start-x);
                        root.y = root.original-y + (event.y - root.drag-start-y);
                    }
                }
            }
            accept
        }
    }
}

// 便签列表组件
component NoteList inherits Rectangle {
    property bool is-visible: AppState.note-list-visible;
    in property <[string]> notes;
    
    x: 0;
    y: 0;
    width: is-visible ? 300px : 0px;
    height: 100%;
    background: Colors.surface;
    drop-shadow-offset-x: 2px;
    drop-shadow-offset-y: 0px;
    drop-shadow-blur: 5px;
    drop-shadow-color: #00000033;
    clip: true;
    
    animate width { duration: 250ms; easing: ease-in-out; }
    
    // 顶部标题栏
    Rectangle {
        y: 0;
        width: 100%;
        height: 48px;
        background: Colors.primary;
        
        Text {
            x: 16px;
            width: parent.width - 32px;
            height: parent.height;
            text: "便签列表";
            color: Colors.text-primary;
            font-size: 16px;
            font-weight: 600;
            vertical-alignment: center;
        }
    }
    
    // 搜索框
    Rectangle {
        y: 48px;
        width: 100%;
        height: 48px;
        padding: 8px;
        
        LineEdit {
            width: 100%;
            height: 100%;
            placeholder-text: "搜索便签...";
            
            edited => {
                AppState.search-query = self.text;
                if (self.text.length > 0) {
                    AppState.search-notes(self.text);
                }
            }
        }
    }
    
    // 便签列表
    ListView {
        y: 96px;
        width: 100%;
        height: parent.height - 96px;
        
        for note in root.notes : Rectangle {
            width: parent.width;
            height: 80px;
            
            // 解析每个便签的JSON数据
            property <string> note-text: note;
            property <string> title: {
                var data = JSON.parse(note-text);
                return data.title;
            }
            property <string> content: {
                var data = JSON.parse(note-text);
                return data.content;
            }
            property <string> note-id: {
                var data = JSON.parse(note-text);
                return data.id;
            }
            property <string> color-name: {
                var data = JSON.parse(note-text);
                return data.color;
            }
            property <color> note-color: {
                if (color-name == "yellow") { return Colors.yellow; }
                else if (color-name == "blue") { return Colors.blue; }
                else if (color-name == "green") { return Colors.green; }
                else if (color-name == "pink") { return Colors.pink; }
                else if (color-name == "purple") { return Colors.purple; }
                else if (color-name == "orange") { return Colors.orange; }
                else { return Colors.yellow; }
            }
            
            Rectangle {
                x: 8px;
                y: 4px;
                width: parent.width - 16px;
                height: parent.height - 8px;
                border-radius: 8px;
                background: note-color;
                
                VerticalLayout {
                    padding: 8px;
                    spacing: 4px;
                    
                    Text {
                        text: title;
                        font-weight: 600;
                        font-size: 14px;
                        color: Colors.text-primary;
                    }
                    
                    Text {
                        text: content;
                        font-size: 12px;
                        color: Colors.text-secondary;
                        overflow: elide;
                        max-lines: 2;
                    }
                }
                
                TouchArea {
                    width: 100%;
                    height: 100%;
                    clicked => {
                        AppState.active-note-id = note-id;
                        AppState.select-note(note-id);
                        AppState.toggle-note-list();
                    }
                }
            }
        }
    }
}

// 设置面板组件
component SettingsPanel inherits Rectangle {
    property bool is-visible: AppState.settings-visible;
    
    x: parent.width - (is-visible ? self.width : 0);
    y: 0;
    width: 300px;
    height: 100%;
    background: Colors.surface;
    drop-shadow-offset-x: -2px;
    drop-shadow-offset-y: 0px;
    drop-shadow-blur: 5px;
    drop-shadow-color: #00000033;
    clip: true;
    
    animate x { duration: 250ms; easing: ease-in-out; }
    
    // 顶部标题栏
    Rectangle {
        y: 0;
        width: 100%;
        height: 48px;
        background: Colors.primary;
        
        Text {
            x: 16px;
            width: parent.width - 32px;
            height: parent.height;
            text: "设置";
            color: Colors.text-primary;
            font-size: 16px;
            font-weight: 600;
            vertical-alignment: center;
        }
    }
    
    // 设置选项
    VerticalLayout {
        y: 48px;
        width: 100%;
        height: parent.height - 48px;
        padding: 16px;
        spacing: 16px;
        
        // 默认颜色设置
        VerticalLayout {
            spacing: 8px;
            
            Text {
                text: "默认便签颜色";
                font-weight: 600;
            }
            
            ComboBox {
                width: 100%;
                model: ["黄色", "蓝色", "绿色", "粉色", "紫色", "橙色"];
                current-index: 0;
                
                property <string> selected-color: {
                    if (self.current-index == 0) { return "yellow"; }
                    else if (self.current-index == 1) { return "blue"; }
                    else if (self.current-index == 2) { return "green"; }
                    else if (self.current-index == 3) { return "pink"; }
                    else if (self.current-index == 4) { return "purple"; }
                    else if (self.current-index == 5) { return "orange"; }
                    else { return "yellow"; }
                }
                
                current-index-changed => {
                    // TODO: 更新默认颜色设置
                }
            }
        }
        
        // 字体大小设置
        VerticalLayout {
            spacing: 8px;
            
            Text {
                text: "字体大小";
                font-weight: 600;
            }
            
            SpinBox {
                width: 100%;
                value: 14;
                minimum: 10;
                maximum: 24;
                
                changed => {
                    // TODO: 更新字体大小设置
                }
            }
        }
        
        // 透明度设置
        VerticalLayout {
            spacing: 8px;
            
            Text {
                text: "便签透明度";
                font-weight: 600;
            }
            
            Slider {
                width: 100%;
                value: 100;
                minimum: 50;
                maximum: 100;
                
                changed => {
                    // TODO: 更新透明度设置
                }
            }
        }
        
        // 开机自启动
        HorizontalLayout {
            spacing: 8px;
            
            Text {
                text: "开机自启动";
                font-weight: 600;
                vertical-alignment: center;
            }
            
            Switch {
                checked: true;
                
                toggled => {
                    // TODO: 更新开机自启动设置
                }
            }
        }
        
        // 自动保存
        HorizontalLayout {
            spacing: 8px;
            
            Text {
                text: "自动保存(秒)";
                font-weight: 600;
                vertical-alignment: center;
            }
            
            SpinBox {
                width: 100px;
                value: 30;
                minimum: 5;
                maximum: 300;
                
                changed => {
                    // TODO: 更新自动保存间隔设置
                }
            }
        }
    }
}

// 主窗口
export component MainWindow inherits Window {
    width: 800px;
    height: 600px;
    title: "记忆便签";
    background: Colors.background;
    
    // 从Rust端接收的便签数据
    in property <[string]> notes;
    
    // 顶部工具栏
    Rectangle {
        y: 0;
        width: 100%;
        height: 48px;
        background: Colors.primary;
        
        HorizontalLayout {
            padding: 8px;
            spacing: 8px;
            
            // 新建便签按钮
            Button {
                text: "新建便签";
                height: 32px;
                clicked => {
                    AppState.create-new-note();
                }
            }
            
            // 便签列表按钮
            Button {
                text: "便签列表";
                height: 32px;
                clicked => {
                    AppState.toggle-note-list();
                }
            }
            
            Rectangle {
                width: 1px;
            }
            
            // 设置按钮
            Button {
                text: "设置";
                height: 32px;
                clicked => {
                    AppState.toggle-settings();
                }
            }
        }
    }
    
    // 便签显示区域
    Rectangle {
        y: 48px;
        width: 100%;
        height: parent.height - 48px;
        
        // 动态加载便签
        for note in root.notes : Rectangle {
            // 解析每个便签的JSON数据
            property <string> note-text: note;
            property <string> title: {
                var data = JSON.parse(note-text);
                return data.title;
            }
            property <string> content: {
                var data = JSON.parse(note-text);
                return data.content;
            }
            property <string> note-id: {
                var data = JSON.parse(note-text);
                return data.id;
            }
            property <string> color-name: {
                var data = JSON.parse(note-text);
                return data.color;
            }
            property <float> pos-x: {
                var data = JSON.parse(note-text);
                return data.position-x;
            }
            property <float> pos-y: {
                var data = JSON.parse(note-text);
                return data.position-y;
            }
            property <float> note-width: {
                var data = JSON.parse(note-text);
                return data.width;
            }
            property <float> note-height: {
                var data = JSON.parse(note-text);
                return data.height;
            }
            property <bool> is-minimized: {
                var data = JSON.parse(note-text);
                return data.is-minimized;
            }
            property <color> note-color: {
                if (color-name == "yellow") { return Colors.yellow; }
                else if (color-name == "blue") { return Colors.blue; }
                else if (color-name == "green") { return Colors.green; }
                else if (color-name == "pink") { return Colors.pink; }
                else if (color-name == "purple") { return Colors.purple; }
                else if (color-name == "orange") { return Colors.orange; }
                else { return Colors.yellow; }
            }
            
            NoteItem {
                x: pos-x * 1px;
                y: pos-y * 1px;
                width: note-width * 1px;
                height: note-height * 1px;
                note-id: note-id;
                title: title;
                content: content;
                note-color: note-color;
                is-minimized: is-minimized;
            }
        }
    }
    
    // 便签列表侧边栏
    NoteList {
        z: 1;
        notes: root.notes;
    }
    
    // 设置面板
    SettingsPanel {
        z: 1;
    }
} 